<template>
  <div class="order">
    <div class="order_all" v-if="receipt == true">
      <div class="order_top">订单信息</div>
      <div class="order_info">
        <div class="order_main flex">
          <div class="order_l">
            <p>订单编号：</p>
            <p>下单时间：</p>
            <p>预约时间：</p>
            <p>支付方式：</p>
            <p>服务类型：</p>
            <p>红包抵扣：</p>
            <p>客户：</p>
            <p>车辆：</p>
            <p>车牌号：</p>
            <p>地址：</p>
          </div>
          <div class="order_r">
            <p class="order_number">{{info.ordersn}}</p>
            <p>{{info.dateline}}</p>
            <p>{{info.meal_timestamp}}</p>
            <p v-if="info.pay_type == 1">余额支付</p><p v-if="info.pay_type == 2">在线支付</p><p v-if="info.pay_type == 4">次卡支付</p>
            <p>{{info.service}}</p>
            <p>{{info.coupon}}元</p>
            <p>{{info.username}}</p>
            <p>{{info.mycar}}</p>
            <p>{{info.mycard_sn}}</p>
            <p>{{info.address}}</p>
          </div>            
        </div>
        <p class="order_addr">地址详情：{{info.addr_detail}}</p>
        <div class="order_sum">
          <!-- <p>订单金额</p>
          <p class="order_sum_actual">{{info.totalprice}}</p> -->
          <p>实际收入</p>
          <p class="order_sum_actual">{{info.commission}}元</p>
        </div>
      </div>

      <div class="order_serve">
      <!-- <div class="order_serve" v-if="info.status >= 2"> -->
        <div class="order_serve_tit flex">
          <div>服务前车况照片</div>
          <button class="order_serve_upload" @click="bfimg_upload" v-if="info.status<=2 || info.status==7">通知客户</button>
        </div>
        <ul class="order_serve_cont flex" v-if="info.status<=2 || info.status==7">
          <li v-for="(item,index) in before_show_img">
            <!-- <img @click="deleteImg(index,0)" :src="item"> -->
            <img @click="magnify(index,0,0)":src="item">
            <i class="iconfont cuo icon-cuo" @click="deleteImg(index,0)"></i>
          </li>
          <li class="order_img_add" @click="addImg(0)" v-if="before_show_img.length < 6">+</li>
        </ul>
        <ul class="order_serve_cont flex" v-if="info.status>=3 && info.status!=7">
          <li v-for="(item,index) in info.images_before">
            <img @click="magnify(index,0,1)" :src="item">
          </li>
        </ul>
      </div>

      <div class="order_serve" v-if="info.status>3 && info.status!=7">
        <div class="order_serve_tit flex">
          <div>服务后车况照片</div>
          <button class="order_serve_upload" @click="afimg_upload" v-if="info.status<=4 && info.status!=7">通知客户</button>
        </div>
        <ul class="order_serve_cont flex" v-if="info.status<=4 && info.status!=7">
          <li v-for="(item,index) in after_show_img">
            <!-- <img @click="clickImg(index,1)" :src="item"> -->
            <img @click="magnify(index,1,0)":src="item">
            <i class="iconfont cuo icon-cuo" @click="deleteImg(index,1)"></i>
          </li>
          <li class="order_img_add" @click="addImg(1)" v-if="after_show_img.length < 6">+</li>
        </ul>
        <ul class="order_serve_cont flex" v-if="info.status>=5 && info.status!=7">
          <li v-for="(item,index) in info.images_before">
            <img @click="magnify(index,1,1)" :src="item">
          </li>
        </ul>
      </div>

      <!-- <div class="order_bottom">{{info}}</div> -->
      <!-- <p>test:{{test}}</p> -->
      <!-- <button class="order_btn" @click="OrderFirm" v-if="btn">提交订单</button> -->
      <!-- <button class="order_btning" @click="OrderFirming" v-else>待确认</button> -->
      <div class="flex order_button">
        <a class="order_link" :href="'tel:'+info.tel">联系客户</a>
      <!--   <button v-if="info.status==7" class="order_link" @click="openLocation">一键导航</button>
        <button class="order_link" @click="openLocation">一键导航</button>   -->      
      </div>

    </div>
    <div class="order_allOther" v-if="receipt == false">请先接单，并开始服务！</div>

    <div class="tab">
      <ul class="tab_main flex">
        <li class="tab_li" @click="toIndex">
          <div>
            <i class="iconfont icontab icon-home2"></i>
          </div>
          <p>首页</p>
        </li>
        <li class="tab_li active" @click="toOrdering">
          <div>
            <i class="iconfont icontab icon-time1"></i>
          </div>
          <p>进行中</p>
        </li>
        <li class="tab_li" @click="toUser">
          <div>
            <i class="iconfont icontab icon-wode2"></i>
          </div>
          <p>我的</p>
        </li>
      </ul>
    </div>
    <!-- 更新经纬度 -->
    <lat-lng></lat-lng>
    <!-- 放大图 -->
    <big-img v-show="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
  </div>
</template>




<script>
import BigImg from '../../common/bigImg.vue'
import wx from 'weixin-js-sdk'
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
let Base64 = require('js-base64').Base64;
export default {
  name: 'Ordering',
  data () {
    return {
      receipt: false,  //判断是否已经接单
      info: {},
      choose_image: 'chooseImage',
      uploadImg: 'uploadImg',
      btn: true,
      jssdk: {}, //jssdk中config的信息
      // 服务照片数组
      before_show_img: [],
      after_show_img: [],
      // 大图
      showImg: false,
      imgSrc: '',
      // before_upload_img: {data:'0000',},
      // after_upload_img: [],
      // test: {data:'datadatatatata'},
      isDeleting: false, //长按删除
    }
  },
  created(){

  },
  mounted() {
    // var id = global.order_wid;
    // console.log(id);
    // if (id) {
    //   this.receipt = true;
    // }
    // this.getInfo(id);
    this.getInfo();
    this.getJssdk();
    // this.getJssdk();
    this.wxConfig();

    this.$root.washShare();
  },
  components: {
    'big-img': BigImg
  },
  methods: {
    OrderFirming(){
      this.btn = true;
    },
    toIndex(){
      this.$router.push({path:'/wash'})
    },
    toOrdering(){
      this.$router.push({path:'/washordering'})
    },
    toUser(){
      this.$router.push({path:'/washuser'})
    },
    wxConfig(){
      var that = this;
      wx.config({
        debug: false,
        appId: that.jssdk.appId,
        timestamp: that.jssdk.timestamp,
        nonceStr: that.jssdk.nonceStr,
        signature: that.jssdk.signature,
        jsApiList: ['chooseImage','uploadImage','openLocation','getLocation']
      });
      wx.ready(function(res){
        console.log(res);
      });
      wx.error(function(res){
        console.log(res);
      })
    },
    // 添加图片
    addImg(from){
      console.log("add_img");
      var that = this;
      // that.test = '开始测试';
      // that.test = that.jssdk;
      // that.test = location.href.split('#')[0];

      // wx.config({
      //   debug: false,
      //   appId: that.jssdk.appId,
      //   timestamp: that.jssdk.timestamp,
      //   nonceStr: that.jssdk.nonceStr,
      //   signature: that.jssdk.signature,
      //   jsApiList: ['chooseImage','uploadImage','getLocation','openLocation']
      // });
      // wx.ready(function(res){
      //   that.test = 'wx.ready ————————' + res;

        wx.chooseImage({
          count: 9,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: function (res) {
            that.test = 'wx.chooseImage  success';
            console.log(res);
            if (from == 0) {
              that.before_show_img = that.before_show_img.concat(res.localIds);
              var length = that.before_show_img.length;
              if (length > 6) {
                var num = length - 6;
                that.before_show_img.splice(0,num);
              }
            } else if (from == 1) {
              that.after_show_img = that.after_show_img.concat(res.localIds);
              var length = that.after_show_img.length;
              if (length > 6) {
                var num = length - 6;
                that.after_show_img.splice(0,num);
              }
            }
          }
        })

      // });
      // wx.error(function(res){
      //   console.log(res);
      // })
    },
    // 上传图片
    imgUpload(from){
      console.log("imgUpload");
      var that = this;
      // var upImg = '';
      var length;
      if (from == 1) {
        length = that.before_show_img.length;
      } else {
        length = that.after_show_img.length;
      }
      if (length == 6) {
        // wx.config({
        //   debug: false,
        //   appId: that.jssdk.appId,
        //   timestamp: that.jssdk.timestamp,
        //   nonceStr: that.jssdk.nonceStr,
        //   signature: that.jssdk.signature,
        //   jsApiList: ['chooseImage','uploadImage','getLocation','openLocation']
        // });
        // wx.ready(function(res){

          if (from == 1) {
            var img = [];
            var i = -1;
            upload ()
            function upload () {
              i += 1;
              var localId = that.before_show_img[i];
              wx.uploadImage({
                localId: localId,
                isShowProgressTips: 1,
                success: function (res) {
                  img = img.concat(res.serverId);
                  if (i < 6) {
                    upload ()
                  }
                  if (img.length == 6) {
                    axios.post(global.api.order.worker.upimg,{
                      uuid: localStorage.getItem('carWashUuid'),
                      order_id: that.info.id,
                      imageArr: img,
                      status: 1,
                    })
                    .then(function(res){
                      console.log("imgUpload then");
                      console.log(res);
                      if (res.data.error == 0) {
                        location.reload();
                        console.log("————————后—图片上传———————"+res.data);
                      }
                    })
                    .catch(function(res){
                      console.log("imgUpload catch");
                      console.log(res);
                    })
                  }
                }
              })
            }
          } else if (from == 2) {
            var img = [];
            var i = -1;
            upload ()
            function upload () {
              i += 1;
              var localId = that.after_show_img[i];
              wx.uploadImage({
                localId: localId,
                isShowProgressTips: 1,
                success: function (res) {
                  img = img.concat(res.serverId);
                  if (i < 6) {
                    upload ()
                  }
                  if (img.length == 6) {
                    axios.post(global.api.order.worker.upimg,{
                      uuid: localStorage.getItem('carWashUuid'),
                      order_id: that.info.id,
                      imageArr: img,
                      status: 2,
                    })
                    .then(function(res){
                      console.log("imgUpload then");
                      console.log(res);
                      if (res.data.error == 0) {
                        location.reload();
                        console.log("————————后—图片上传———————"+res.data);
                      }
                    })
                    .catch(function(res){
                      console.log("imgUpload catch");
                      console.log(res);
                    })
                  }
                }
              })
            }
          }

        // });
        // wx.error(function(res){
        //   console.log(res);
        // })
      } else {
        console.log("请上传6张图片！");
      }
    },
    bfimg_upload(){ //前
      this.imgUpload(1);
    },
    afimg_upload(){ //后
      this.imgUpload(2);
    },
    // jssdk
    getJssdk(){
      var that = this;
      var pathUrl = window.location.href.split('#')[0];
      // var pathUrl = "https://ecar.jslcwy.com/";
      // that.test = pathUrl;
      pathUrl = Base64.encode(pathUrl);
      axios.get(global.api.user.jssdk,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          url: pathUrl,
        }
      })
      .then(function(res){
        console.log("getJssdk then");
        console.log(res);
        that.jssdk = res.data.content;
      })
      .catch(function(res){
        console.log("getJssdk catch");
        console.log(res);
      })
    },
    // 信息获取
    getInfo(){
      var that = this;
      axios.get(global.api.order.worker.list,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          // status: 0,
          status: 0,
          type: 1,
          page: 1,
        }
      })
      .then(function(res){
        console.log("getInfo then");
        console.log(res);
        if (res.data.error == 0) {
          that.receipt = true;
          that.info = res.data.list[0];
        }
        
      })
      .catch(function(res){
        console.log("getInfo catch");
        console.log(res);
      }) 
    },
    // 大图
    magnify(index,e,from) {
      this.showImg = true;
      if (from == 0) {
        if (e == 0) {
          this.imgSrc = this.before_show_img[index];
        } else if (e == 1) {
          this.imgSrc = this.after_show_img[index];
        }
      } else {
        if (e == 0) {
          this.imgSrc = this.info.images_before[index];
        } else if (e == 1) {
          this.imgSrc = this.info.images_after[index];
        }
      }

    },
    viewImg(){
      this.showImg = false;
    },
    // 删除图片
    deleteImg(index,from){
      var that = this;
      if (from == 0) {
        that.before_show_img.splice(index,1);
      } else if (from == 1) {
        that.after_show_img.splice(index,1);
      }
    },
    // 导航
    openLocation(){
      var that = this;
      wx.config({
        debug: false,
        appId: that.jssdk.appId,
        timestamp: that.jssdk.timestamp,
        nonceStr: that.jssdk.nonceStr,
        signature: that.jssdk.signature,
        jsApiList: ['chooseImage','uploadImage','openLocation','getLocation']
      });
      wx.ready(function(res){
        console.log(res);
        var lat = parseFloat(that.info.lat);
        var lng = parseFloat(that.info.lng);
        wx.openLocation({
          latitude: lat, // 纬度，浮点数，范围为90 ~ -90
          longitude: lng, // 经度，浮点数，范围为180 ~ -180。
          name: that.info.address, // 位置名
          address: '', // 地址详情说明
          scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        })        
      });
      wx.error(function(res){
        console.log(res);
      })
    },
  },
}
</script>




<style scoped>
  button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .order{}
  .order_all{}
  .order_allOther{}
  .order_top{
    color: #2ecc80;
    text-align: left;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
    padding-left: 1rem;
    font-size: 1.1rem;
  }
  .order_info{
    text-align: left;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    padding: 1rem 0.5rem;
    position: relative;
  }
  .order_info p{
    margin: 0;
    padding: 0;
  }
  .order_main{
    justify-content: flex-start;
    align-items: flex-start;
  }
  .order_l{
    /*width: 5rem;*/
    display: table;
    text-align: right;
  }
  .order_r{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .order_main p {
    /*margin: 0 auto;*/
    line-height: 1.8rem;
    font-size: 0.9rem;
  }
  .order_number{
    max-width: 55%;
    /*text-align: left;*/
  }
  .order_addr{
    line-height: 1.8rem;
    font-size: 0.9rem;
  }
  /*金额*/
  .order_sum{
    position: absolute;
    right: 0.5rem;
    top: 1rem;
    text-align: right;
    font-size: 0.8rem;
    color: #595757;
    line-height: 1.8rem;
  }
  .order_sum_actual{
    font-size: 1.5rem;
  }
  /* 服务 */
  .order_serve{
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    /*padding: 1rem;*/
  }
  .order_serve_tit{
    color: #2ecc80;
    text-align: left;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
    padding-left: 1rem;
    font-size: 1.1rem;
    justify-content: space-between;
    align-items: center;
  }
  .order_serve_upload{
    border: none;
    width: 4rem;
    /*height: 1.5rem;*/
    /*line-height: 1.5rem;*/
    padding: 0.3rem 0;
    border-radius: 0.3rem;
    color: #fff;
    background-color: #2ecc80;
    margin-right: 1rem;
  }
  /*.order_serve_uploaded{
    background-color: #B9B9BA
  }*/
  .order_serve_cont{
    flex-wrap: wrap;
    margin: 1.2rem 3% 1rem;
  }
  .order_serve_cont li{
    width: 32%;
    height: 9.5rem;
    margin-right: 2%;
    margin-bottom: 0.7rem;
    position: relative;
  }
  .cuo{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.5rem;
    background-color: rgba(0,0,0,0.3);
    color: #fff;
  }
  .order_serve_cont li.order_img_add{
    width: 32%;
    height: 9.5rem;
    margin-right: 2%;
    margin-bottom: 0.7rem;
    line-height: 9.5rem;
    text-align: center;
    background-color: #EFEFEF;
    color: #8E8E8E;
    font-size: 2.5rem;
  }
  .order_serve_cont li:nth-of-type(3n+0){
    margin-right: 0;
  }
  .order_serve_cont img{
    width: 100%;
    height: 100%;
  }
  .order_bottom{
    height: 2.5rem;
  }
  /**/
  .order_button{
    width: 90%;
    margin: 0 5%;
    justify-content: space-between;
    align-items: center;
  }
  .order_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 1rem 0 5rem;
  }
  .order_btning{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #B9B9BA;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 1rem 0 5rem;
  }
  /*底部导航*/
  .tab{
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
  }
  .tab_main{
    border-top: 1px solid #797979;
    box-sizing: border-box;
    padding: 0.25rem 0 0;
  }
  .tab_main .active{
    color: #2ECC80;
  }
  .tab_li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #B5B5B5;
  }
  .tab_li p{
    font-size: 0.9rem;
  }
  .icontab{
    font-size: 1.5rem;
  }
  .order_link{
    border: none;
    font-size: 0.9rem;
    color: #fff;
    border-radius: 0.2rem;
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 2rem auto 5rem;
    text-align: center;
    text-decoration: none;
    background-color: #2ecc80;
    display: block;
  }
</style>
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_start{
    justify-content: space-between;
    align-items: flex-start;
  }
</style>